<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts-青岛地图</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>

<div id="china-map"></div>

<script type="text/javascript">
    $.get('echarts/qingdao.json', function (qDjson) {
        echarts.registerMap('青岛', qDjson);
        var chart = echarts.init(document.getElementById('china-map'));
        option = {
            tooltip: {
                trigger: 'item'
            },
            series:[
                {
                    name:'数量',
                    type:'map',
                    map:'青岛',
                    mapLocation:{
                        y:60
                    },
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true,
                            color:'#333'
                        },
                        emphasis:{
                            color:'#333'
                        }
                    },
                    itemSytle:{
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            areaColor: '#32fdff'
                        },                        
                        normal: {
                            color: '#c60fff',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data:[
                        {
                            name:'城阳区',value:Math.round(Math.random()*500),label: {normal: {show: true}},
                            mapData : [
                                {'latitude':36.383813, 'longitude':120.354236 , 'title':'青岛技师学院', 'desc':'desc1', 'color':'#0394d9'},
                                {'latitude':36.273556, 'longitude':120.393905 , 'title':'青岛机场', 'desc':'流亭', 'color':'#d94d02'},
                            ]
                        },
                        {
                            name:'崂山区',value:Math.round(Math.random()*500),label: {normal: {show: true}},
                            mapData : [
                                {'latitude':36.11359, 'longitude':120.475591 , 'title':'崂山区政府', 'desc':'desc1', 'color':'#0394d9'}
                            ]
                        },
                        {
                            name:'市北区',value:Math.round(Math.random()*500),label: {normal: {show: true}},
                            mapData : [
                                {'latitude':36.093802, 'longitude':120.381163 , 'title':'市北区政府', 'desc':'desc1', 'color':'#0394d9'}
                            ]     
                        },
                        {
                            name:'市南区',value:Math.round(Math.random()*500),label: {normal: {show: true}},
                            mapData : [
                                {'latitude':36.081697, 'longitude':120.418931 , 'title':'市南区政府', 'desc':'desc1', 'color':'#0394d9'}
                            ] 
                        },
                        {
                            name:'李沧区',value:Math.round(Math.random()*500),label: {normal: {show: true}},
                            mapData : [
                                {'latitude':36.151807, 'longitude':120.438886 , 'title':'李沧区政府', 'desc':'desc1', 'color':'#0394d9'}
                            ] 
                        },
                        {name:'黄岛区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'即墨区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'平度市',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'莱西市',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'胶州市',value:Math.round(Math.random()*500),label: {normal: {show: true}}}
                    ]
                }
            ],
        };
        chart.setOption(option);
        //轮播展示
        var currentIndex = -1;
        setInterval(function() {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0, //表示series中的第几个data数据循环展示
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
            // 高亮当前图形
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            // 显示 tooltip
            chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
        }, 3000);
        //鼠标点击事件
        chart.on('click', function(params) {
            var cityName = params.name;
            var cityValue = params.value;
            alert(cityName + "***" + cityValue);
        });
    });
</script>


</body>
</html>